<template>
  <div class="app-container">
    <common-table
      :colnames="colnames"
      :list-data="listData"
      :list-loading="listLoading"
      :is-multiple="isMultiSelect"
      @fetchData="fetchData"
      @itemNew="itemNew"
      @itemEdit="itemEdit"
      @itemDelete="itemDelete"
    >
      <el-button @click="$router.back()">返回</el-button>
      <h2>{{ stationName }} {{ sectionName }} 车位</h2>
    </common-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      destroy-on-close
    >
      <common-edit
        :fields="dialog.editCols"
        :rules="dialog.editRules"
        :edit-type="editType"
        :values="editValues"
        @onCancel="dialogVisible = false"
        @onSubmit="onSubmit"
      />
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CommonTable from '../commontable'
import CommonEdit from '../commontable/edit'
import { getPlaceList, getPlaceListSection, addPlace, putPlace, delPlace } from '@/api/place'
import apiDefines from '../commontable/apidefines'
import { batchDel } from '@/utils'

export default {
  name: 'Place',
  components: { CommonTable, CommonEdit },
  data() {
    return {
      colnames: [
        { displayName: 'ID', colName: 'id', colWidth: '64px', sortable: 'custom' },
        { displayName: '车位名称', colName: 'placeName', sortable: 'custom' },
        { displayName: '车位说明', colName: 'placeDesc', sortable: 'custom' },
        { displayName: '车位状态', colName: 'placeStatus', hidden: true, sortable: 'custom' },
        { displayName: '是否禁用', colName: 'isDisabled', dataType: 'bool', hidden: true, sortable: 'custom' },
        { displayName: '备注', colName: 'remark', sortable: 'custom' }
      ],
      listData: {},
      listLoading: false,
      isMultiSelect: false,
      dialogVisible: false,
      dialogTitle: '新建',
      stationName: '未指定场站',
      sectionName: '',
      listQuery: {},
      editType: 'edit',
      editValues: {},
      dialog: apiDefines.place
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.params.stationName) {
        this.stationName = this.$route.params.stationName
      }
      if (this.$route.params.sectionName) {
        this.sectionName = this.$route.params.sectionName
      }
    })
  },
  methods: {
    fetchData(listQuery) {
      this.listQuery = listQuery
      console.log('fetchData', listQuery)
      this.listLoading = true
      let getList
      if (this.$route.params.sectionId) {
        getList = getPlaceListSection(listQuery, this.$route.params.sectionId)
      } else {
        getList = getPlaceList(listQuery, this.$route.params.stationId)
      }
      getList.then(ret => {
        console.log('ret', ret)
        if (Array.isArray(ret.data)) {
          this.listData = { records: ret.data }
        } else {
          this.listData = ret.data
        }
      }).finally(() => {
        this.listLoading = false
      })
    },
    itemNew() {
      console.log('price New')
      this.editType = 'add'
      this.dialogTitle = '新建'
      this.editValues = {
        stationId: this.$route.params.stationId,
        sectionId: this.$route.params.sectionId
      }
      this.dialogVisible = true
    },
    itemEdit({ type, item, items }) {
      console.log('itemEdit')
      this.editType = 'edit'
      this.editValues = item
      this.dialogTitle = '修改'
      this.dialogVisible = true
    },
    itemDelete({ type, item, items }) {
      console.log('itemDelete')
      if (type === 'one') {
        delPlace({ placeId: item.id }).then(ret => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.fetchData(this.listQuery)
        })
      } else if (type === 'multi') {
        batchDel(delPlace, items, { idname: 'placeId', idvalue: 'id' }).then(ret => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.fetchData(this.listQuery)
        })
      }
    },
    onSubmit(formData) {
      console.log('onSubmit', formData)
      if (this.editType === 'add') {
        // 新建
        addPlace(formData).then((ret) => {
          console.log('add ret', ret)
          this.$message({
            type: 'success',
            message: '添加成功！'
          })
          this.dialogVisible = false
          this.fetchData(this.listQuery)
        })
      } else {
        // 修改
        putPlace(formData).then((ret) => {
          console.log('edit ret', ret)
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
          this.dialogVisible = false
          this.fetchData(this.listQuery)
        })
      }
    }
  }
}
</script>
